<template>
  <div class="chat-container">
    <!--导航栏-->
    <van-nav-bar
      title="小智同学"
      left-arrow
      @click-left="$router.back()"
    />
    <!--/导航栏-->
    <!--消息列表-->
    <van-cell-group ref="message">
      <van-cell
        v-for="(item, index) in messages"
        :title="item.msg"
        :key="index"
      />
    </van-cell-group>
    <!--/消息列表-->
    <!--发送消息-->
    <div class="send-wrap">
      <van-field
        v-model="message"
        placeholder="请输入信息"
        :border="false"
      />
      <van-button
        type="primary"
        @click="onSend"
      >发送</van-button>
    </div>
    <!--/发送消息-->
  </div>
</template>

<script>
import io from 'socket.io-client'
import { getItem, setItem } from '../../utils/storage'

export default {
  name: 'chatIndex',
  data () {
    return {
      message: '',
      messages: getItem('chat-message') || [],
      socket: null // WebSocket 通信对象
    }
  },
  created () {
    // 建立连接
    const socket = io('http://ttapi.research.itcast.cn/')
    this.socket = socket
    socket.on('connect', () => {
      console.log('连接建立成功！')
    })
    socket.on('disconnect', () => {
      console.log('连接断开！')
    })
    // 监听 message （自定义）事件，接收服务端消息
    socket.on('message', data => {
      // 把接收到的消息放入数组中
      this.messages.push(data)
    })
  },
  mounted () {
    this.scrollTopBottom() // 加载数据后就滚动到列表底部
  },
  watch: {
    messages () {
      // 本地化存储消息记录
      setItem('chat-message', this.messages)
      // 如果你要在操作数据之后立即操作数据影响的视图 DOM，那么最好把代码放到 nextTick 函数中
      // 数据改变影响视图更新这件事儿不是立即的
      this.$nextTick(() => {
        this.scrollTopBottom()
      })
    }
  },
  methods: {
    onSend () {
      // 发送请求消息
      const data = {
        msg: this.message,
        timestamp: Date.now()
      }
      this.socket.emit('message', data) // 发送消息数据
      this.messages.push(data) // 把发送消息数据放入数组中
      this.message = '' // 清空输入框
    },
    scrollTopBottom () {
      const list = this.$refs.message
      list.scrollTop = list.scrollHeight
    }
  }
}
</script>

<style scoped>
.chat-container {
  background-color: #F5F5F6;
}
.van-cell-group {
  position: fixed;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 44px;
  overflow-y: auto;
  background-color: #F5F5F6;
}
.send-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 10px;
}
.send-wrap button {
  min-width: 72px;
}
</style>
